<template>
  <div>
    <page-main>
      <el-form :model="search" inline>
        <el-form-item label="人员名称">
          <el-input v-model="search.user_name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="维保时间">
          <el-date-picker v-model="search.createtime" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDateList()" size="mini">搜索</el-button>
          <el-button type="warning" @click="reset" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" height="50vh" v-loading="loading">
        <el-table-column prop="user_name" label="人员名称" width="180"> </el-table-column>
        <el-table-column prop="wb_unit_name" label="技术服务机构"> </el-table-column>
        <el-table-column prop="unit_name" label="社会单位"> </el-table-column>
        <el-table-column prop="image" label="原有人脸图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="upDataUrl + scope.row.image"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.image]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="selfie" label="不符人脸图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="upDataUrl + scope.row.selfie"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.selfie]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="维保时间">
          <template #default="scope">
            <div>{{ $getDateTime(scope.row.createtime) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="getDateList"
          v-model:currentPage="tableDataInfo.current_page"
          :total="tableDataInfo.total"
          :page-count="tableDataInfo.last_page"
          background
          layout="total,prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      search: {},
      tableDataInfo: '',
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      loading: false
    }
  },
  created() {
    this.getDateList()
  },
  methods: {
    reset() {
      this.search = {}
      this.getDateList(1)
    },
    getDateList(page) {
      this.loading = true
      let pageNum = 1
      if (page) pageNum = page
      this.$api
        .post('/unit/Dashboard/noSelfLocation', { rows: 20, page: pageNum, ...this.search })
        .then((res) => {
          this.tableData = res.data.data
          delete res.data.data
          this.tableDataInfo = res.data
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.block {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
